<template>
	<div class="charts-menu">
    <el-menu
      :default-active="active"
      :default-openeds="defaultOpeneds"
      @open="handleOpen"
      @close="handleClose"
      :collapse="false"
      text-color="#262626"
      :active-text-color="getThemeColor">
      <el-submenu v-for="item in menuList" :key="item.id" :index="item.reportKey">
        <template slot="title">
          <i class="iconfont" :class="item.reportIcon"></i>
          <span>{{item.reportName}}</span>
        </template>
        <div v-if="item.reportThemeList">
            <div v-for="(subitem, subindex) in item.reportThemeList" :key="subindex">
              <el-menu-item :index="subitem.routingKey" @click="handleShowThisData(subitem)">
                {{subitem.reportName}}
              </el-menu-item>
            </div>
        </div>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>

export default {
  name: 'charts-menu',
  props: {
    menuData: {
      type: Array,
      default: () => ([])
    },
    chartParent: {
      type: String,
      default: ''
    },
    chartsValue: {
      type: String,
      default: ''
    },
    isOpenAll: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      menuList: [],
      active: '',
      openeds: ''
    }
  },
  computed: {
    defaultOpeneds() {
      return this.isOpenAll ? this.menuList.map(menu => menu.reportKey) : [this.openeds]
    }
  },
  watch: {
    chartParent(n) {
      this.openeds = n
    },
    chartsValue(n) {
      this.active = n
    },
    menuData(n) {
      this.menuList = this.filterReportThemeList(n)
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleShowThisData(subitem) {
      this.$emit('chartsValue',subitem)
    },
    filterReportThemeList(data) {
      data.forEach(item => {
        item.id = item.id.toString()
        if(item.reportThemeList) {
          this.filterReportThemeList(item.reportThemeList)
        }
      })
      return data
    } 
  }
}
</script>
<style lang="scss" scoped>
.charts-menu {
  width: 210px;
  height: calc(100vh - 85px);
  overflow: auto;
  background-color: #fff;
  .el-menu {
    border-right: none;
  }
  .el-menu-item {
    height: 40px;
    line-height: 40px;
  }
  .el-menu-item:hover {
    background-color: #E6FFFB !important;
  }
  ::v-deep .el-menu--inline .is-active{
    border-right: 2px solid $color-primary-light-6 !important;
    background-color: #E6FFFB !important;
  }
  ::v-deep .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }
  ::v-deep .el-submenu__title:hover {
    background-color: #E6FFFB !important;
  }
  ::v-deep .el-submenu__title i {
    color: #262626;
  }
}
</style>